<template>
  <div class="markdown-content" v-html="renderedMarkdown"></div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { marked } from "marked";

// 原始 Markdown 文本（含 ==高亮== 语法）
const markdownText = ref(`
  这是一段普通文本，==这部分需要高亮==，还有==另一段高亮内容==。
`);

// 自定义渲染器，处理 == 高亮语法
const renderer = new marked.Renderer();
// 重写文本解析规则：替换 ==xxx== 为 <span class="highlight">xxx</span>
const renderHighlight = (text) => {
  console.log(text, "text");

  // 使用正则匹配 == 包裹的内容（非贪婪匹配）
  return text.text.replace(/==(.*?)==/g, '<span class="highlight">$1</span>');
};
onMounted(() => {
  console.log(213123);
  
  // 覆盖 marked 的文本渲染方法
});
  renderer.text = renderHighlight;

// 计算属性：解析 Markdown 并处理高亮
const renderedMarkdown = computed(() => {
  return marked(markdownText.value, { renderer });
});
</script>

<style scoped>
/* 高亮样式 */
.markdown-content :deep(.highlight) {
  background-color: #fff3cd; /* 浅黄色背景 */
  padding: 0 2px;
  border-radius: 2px;
}
</style>
